<template>
  <div id="quality-service">
    <van-nav-bar title="品质服务" left-arrow @click-left="onClickLeft" fixed />
    <!-- <van-search placeholder="请输入搜索关键词" v-model="value" /> -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch" style="color:#666">搜索</div>
    </van-search>
    <div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
          <van-cell v-for="item in qualityList" :key="item.id">
            <van-card style="background:#FFFFFF">
              <span slot="thumb" class="file-img">
                <img :src="item.images" alt />
              </span>
              <div slot="desc" class="file-text">
                <div class="file-name">{{item.name}}</div>
                <div class="file-tel">
                  <van-icon name="phone-o" />
                  <span>电话：{{item.contactInfo}}</span>
                </div>
                <div class="file-address">住址：{{item.address}}</div>
              </div>
            </van-card>
          </van-cell>
        </van-pull-refresh>
      </van-list>
    </div>
  </div>
</template>
<script>
import api from "@/controller/agedService.js";
import constant from "@/controller/constant.js";
export default {
  name: "qualityService",
  data() {
    return {
      value: "",
      loading: false,
      finished: false,
      isLoading: false,
      qualityList: [],
      curPage: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.getQualityList()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSearch() {
      this.qualityList =[]
      this.curPage = 1
      this.finished = false
      setTimeout(() => {
        this.getQualityList()
      }, 500)
    },
    onLoad() {
      this.isLoading = false
      this.onRefresh()
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        this.curPage += 1
        this.getQualityList()
      }, 500) 
    },
    getQualityList() {
      const data = {
        "curPage": this.curPage,
        "name": this.value,
        "pageSize": this.pageSize,
      }
      const _self = this
      api
      .pensionQuality_v1_search(data)
      .then(res => {
        if(res.code == 0) {
          if(
            (res.datas && res.datas.records.length === 0) ||
                res.datas === null
          ) {
            // _self.$toast('暂无更多数据')
            _self.loading = false
            _self.isLoading = false
            _self.finished = true
            return
          }
          this.$nextTick(() => {
            _self.loading = false
            _self.isLoading = false
          })
          if (res.datas.records.length < this.pageSize) {
            _self.finished = true
          } 
            _self.qualityList = [..._self.qualityList, ...res.datas.records]
        }
      }).catch(() => {
        this.$toast(constant.netErrMsg);
      })
    }
  } 
};
</script>
<style lang="scss" scoped>
@import "../../styles/searchStyle.scss";
</style>
<style lang="scss" scoped>
#quality-service {
  .van-cell {
    padding: 0;
  }
  .van-list {
    min-height: calc(100vh - 99px);
    background: #ffffff;
  }
  .van-card {
    padding: 20px;
    border-bottom: 0.5px solid #e2e2e2;
    .van-card__thumb {
      width: 60px;
      height: 60px;
    }
    .van-card__content {
      min-height: 0;
    }
  }
  .van-card__thumb {
    width: 60px;
    height: 60px;
    margin: 0;
    .file-img {
      width: 60px;
      height: 60px;
      display: inline-block;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .file-text {
    margin-left: 12px;
    display: inline-block;
    .file-name {
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      font-weight: bolder;
      height: 20px;
      line-height: 20px;
    }
    .file-tel,
    .file-address {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #666666;
      letter-spacing: 0;
      line-height: 16.5px;
      margin-top: 3.5px;
      i {
        font-size: 15px;
        line-height: 16.5px;
        position: absolute;
        top: 24.5px;
      }
      span {
        margin-left: 20.5px;
      }
    }
  }
  .van-cell:not(:last-child)::after {
    border: none !important;
  }
}
</style>